@charset "utf-8";
@import "common/reset";
@import "common/common";

.web {
    position: relative;
    width: 100%;
    overflow: hidden;
    header {
        height: n(150px);
        .left {
             line-height: n(58px);
            vertical-align: middle;
            text-align: center;
            width: n(125px);
            height: n(58px);
            border: n(2px) solid #ff9344;
            border-radius: n(25px);
            margin-top: n(50px);
            margin-left: n(25px);
            a {
                display: inline-block;
                color: #000000;

            }
        }
        .center {

            text-align: center;
            width: 100%;
            span {
                display: inline-block;
                margin-top: n(60px);
            }
        }
        .right {
            width: n(184px);
            select {
                -webkit-appearance: none;
                width: n(159px);
                height: n(55px);
                border: n(2px) solid #ff9344;
                background: url("../images/xialkuang.png") no-repeat right n(12px) top n(22px) #ffffff;
                border-radius: n(3px);
                background-size: n(30px) n(16px);
                text-indent: n(13px);
                margin-right: n(22px);
                font-size: n(26px);
                margin-top: n(48px);
            }
        }
    }
    section {
        margin-bottom: n(400px);
        .sousuo {
            overflow: hidden;
            .search {
                box-sizing: border-box;
                line-height: n(54px);
                margin: 0 auto;
                width: n(268px);
                height: n(54px);
                border: $border-color n(2px)solid;
                border-radius: n(25px);
                margin-top: n(48px);
                font-size: 0;
                input {
                    vertical-align: middle;
                    width: n(220px);
                    background: none;
                    border: none;
                    height: n(50px);
                    line-height: n(50px);
                    margin-left: n(18px);
                    padding: 0 n(12px);
                    font-size: n(24px);
                }
                i {
                    font-size: n(34px);
                    vertical-align: middle;
                    color: $border-color;
                    margin-left: n(-24px);
                }
            }
        }
        .we {
            text-align: center;
            h2 {
                margin-top: n(30px);
                font-size: n(26px);
            }
        }
        .compilations {
            width: 60%;
            margin: 0 auto;
            font-size: 0;
            margin-top: n(14px);
            a {
                display: inline-block;
                width: n(130px);
                overflow : hidden;
                text-overflow : ellipsis; 
                white-space : nowrap; 
                line-height: n(64px);
                color: #9e9e9e;
                width: 24%;
                height: n(66px);
                background: #dcdcdc;
                font-size: n(20px);
                display: inline-block;
                text-align: center;
                margin-bottom: n(4px);
                margin-left: n(4px);
            }
        }
        .group {
            margin-top: n(58px);
            .favorable {
                line-height: n(55px);
                i {
                    margin-left: n(21px);
                    color: $border-color;
                    vertical-align: middle;
                    font-size: n(55px);
                }
                span{
                    font-size: n(30px);
                    vertical-align: middle;
                }
            }
            .move {
                line-height: n(55px);
               a {
                   color: #000000;
                    vertical-align: middle;
                    font-size: n(30px);
                }
                i {
                    margin-right: n(20px);
                    vertical-align: middle;
                    color: $border-color;
                    font-size: n(24px);
                }
            }
        }
        .photo{
            margin-top: n(32px);
            .miantuan{
                float: left;
                width: 38%;
                margin-right: n(10px);
                margin-left: n(24px);
                img{              
                    width: 100%;
                                      
                }
            }
            .zong{
                width: 56%; 
                float: left;          
            .egg{
                float: left;
                img{                  
                    width: 100%;                
                }
            }
            .shou{
                float: left;
                width: 100%;
                img{                 
                    width: 48%;
                    font-size: 0;                   
                }
            }
           } 
        }
        .recommend{
            ul{
                margin-top: n(46px);
                margin-left: n(24px);
                li{
                    overflow: hidden;
                    float: left;
                    width: 33%;
                    img{
//                      
                        width: 90%;
//                      height: n(198px);
                    }
                }
            }
        }
    }
}
